<template>
  <div class="city">
    <div class="center">
      <!-- 页标题 -->
      <div class="page_title">
        <h1>
          <span>探索</span>
          <span>中国</span>
        </h1>
      </div>
      <!-- 导航栏 -->
      <div class="navs">
        <div class="nav-h">
          <div class="nav" @click="goHotel()">
            <span>酒店</span>
            <span class="el-icon-s-home"></span>
          </div>
          <div class="nav" @click="goAttractions()">
            <span>景点</span>
            <span class="el-icon-s-promotion"></span>
          </div>
          <div class="nav" @click="goFood()">
            <span>美食</span>
            <span class="el-icon-fork-spoon"></span>
          </div>
          <div class="nav" @click="goTraveller()">
            <span>旅行者之家</span>
            <span class="el-icon-picture"></span>
          </div>
        </div>
      </div>
      <!-- 图片展示区 -->
      <div class="f2">
        <div id="city_show">
          <div class="col_1">
            <div>
              <img src="img/China1.jpg" />
            </div>
          </div>
          <div class="col_2">
            <div>
              <img src="img/China2.jpg" />
            </div>
            <div>
              <img src="img/China3.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 城市介绍 -->
      <div class="city_intro">
        <h1>关于中国</h1>
        <p>
          世界上没有任何地方像巴黎一样，仅仅提起她的名字便能让人心神荡漾。
          这座城市魅力非凡，拥有不同凡响的艺术品、建筑、文化瑰宝和美食，但这里还有更鲜为人知的梦幻景致待您探索：
          铺满鹅卵石的别致街道、转角处香气四溢的面包店，还有非常适合享用一杯博若莱的舒适小酒馆。
          准备好踏上独一无二的巴黎之旅。
        </p>
      </div>
      <div>
        <h2 style="padding: 0 24px; margin-top: 64px; margin-bottom: 24px">
          目的地
        </h2>
        <swiper-floorb v-if="data" :items="data" />
        <h2 style="padding: 0 24px; margin-top: 64px; margin-bottom: 24px">
          中国必去景点
        </h2>

        <recom-mend
          v-if="hotel_data"
          title="住宿"
          subject="既迷人又具现代感，名不虚传。"
          introduce="免费Wifi，网络，客房服务，免费停车，游泳池"
          :hdata="hotel_data"
        />
        <recom-mend
          v-if="jingdian_data"
          title="玩乐"
          subject="必到之处、漫步路线和特色体验。"
          :jdata="jingdian_data"
        />
        <recom-mend
          v-if="food_data"
          title="餐饮"
          subject="不容错过的餐厅，让您用餐畅饮、大快朵颐。"
          :fdata="food_data"
        />
      </div>
    </div>
  </div>
</template>

<script>
import RecomMend from "@/components/RecomMend.vue";

import SwiperFloorb from "@/components/SwiperFloorb.vue";

export default {
  components: { RecomMend, SwiperFloorb },
  methods: {
    goTraveller() {
      this.$router.push("/traveller");
    },
    goAttractions() {
      this.$router.push("/attractions");
    },
    goFood() {
      this.$router.push("/food");
    },
    goHotel() {
      this.$router.push("/hotel");
    },
  },
  data() {
    return {
      data: [],
      hotel_data: [],
      jingdian_data: [],
      food_data: [],
      value: 3.5,
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  created() {
    //获取城市
    this.axios.get("citylist").then(res => {
      console.log(res);
      this.data = res.data.data;
    });
    //获取酒店
    this.axios.get("hotellist").then(res => {
      console.log(res);
      this.hotel_data = res.data.data;
    });
    //获取景点
    this.axios.get("jingdianlist").then(res => {
      console.log(res);
      this.jingdian_data = res.data.data;
    });
    //获取美食
    this.axios.get("foodlist").then(res => {
      console.log(res);
      this.food_data = res.data.data;
    });
  },
};
</script>
<style lang="scss" scoped>
*,
a {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.center {
  margin: 0 auto;
  width: 1200px;
}

.page_title {
  font-size: 30px;
  margin: 25px 0;

  span:first-child {
    color: red;
  }
}

.navs {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  .nav-h {
    display: flex;
    justify-content: space-around;
    .nav {
      width: 250px;
      height: 50px;
      border: 1.5px solid #000;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      padding: 0 15px;
      span {
        font-size: 20px;
        font-weight: 500;
        align-self: center;
      }
      &:hover {
        background-color: #000;
        color: white;
      }
    }
  }
}

#city_show {
  width: 100%;
  height: 20%;
  display: flex;
  flex-flow: row wrap;

  img {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: 1s;
  }

  img:hover {
    transform: scale(1.05);
  }

  .col_1 {
    width: 700px;
    height: 100%;

    > div {
      width: 700px;
      height: 500px;
      border: 1px;
      overflow: hidden;
    }
  }

  .col_2 {
    width: 500px;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    // >div:first-child{
    //   padding-bottom: 2px;
    // }

    > div {
      width: 500px;
      height: 250px;
      overflow: hidden;

      // box-sizing: border-box;
    }
  }
}

.city_intro {
  padding: 0 24px;
  h1 {
    margin-top: 50px;
    margin-bottom: 20px;
  }

  p {
    font-size: 20px;
    font-weight: 20;
  }
}
</style>
